<template>
    <p>这是一个组件</p>
    {{msg}}
    {{ mtlSpan }}
    <!-- 文本插值 -->
    <div v-html="mtlSpan"></div>
    <!-- html插值 -->
    <!-- <img src="//www.baidu.com/img/flexible/logo/pc/index@2.png" alt="">
    <img v-bind:src="imgUrl" alt="">
    <img :src="imgUrl" alt=""> -->
    <button v-on:click="btnAction">点击</button>
    <button @click="btnAction">再点击</button>
    <h1>v-if</h1>
    <p v-if="isActive">v-if is true</p> 
    <p v-else>v-if is false</p>
    <!-- 删除 -->
    <p v-show="isActive">v-show</p>
    <!-- 隐藏 -->
    <button @click="switchIsAction">切换状态</button>

    <p v-if="num==0">num is 0</p>
    <p v-else-if="num==1">num is 1</p>
    <p v-else>num 非0非1</p>
    <button @click="changeNum(0)">num 设置为 0</button>
    <button @click="changeNum(1)">num 设置为 1</button>
    <button @click="changeNum(2)">num 设置为 2</button>

    <h1>v-for</h1>
    <p v-for="item,index in arr">itme是{{ item }},index是{{ index }}</p>
    <p v-for="value ,key,index in obj">value是{{ value }},key是{{ key }},index是{{ index }}</p>

    <h1>v-model</h1>
    <h2>配置信息</h2>
    <div>
        <label for="">昵称</label>
        <input type="text" v-model="user.name">
    </div>
    <div>性别
    <input type="radio" name="sex" v-model="user.sex" value="男">男
    <input type="radio" name="sex" v-model="user.sex" value="女">女
</div>
<div>
    <label for="">心愿单</label>
    <input type="checkbox" name="wish" v-model="user.wish" value="iphone">iphone
    <input type="checkbox" name="wish" v-model="user.wish" value="ipad">ipad
    <input type="checkbox" name="wish" v-model="user.wish" value="iwatch">iwatch
    <input type="checkbox" name="wish" v-model="user.wish" value="其他">其他
</div>
<div>
    <label for="">组号</label>
    <select v-model="user.group" style="width: 100px">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>
</div>
<div>
    <label for="">备注：</label>
    <textarea v-model="user.remark"></textarea>
</div>
<h2>信息</h2>
<p>昵称：{{ user.name }}</p>
<p>性别：{{ user.sex }}</p>
<p>心愿单：{{ user.wish }}</p>
<p>组号：{{ user.group }}</p>
<p>备注：{{ user.remark }}</p>
</template>

<script>
export default {
    data(){
        return{
            msg:"helle world",
            mtlSpan:"<span>html标签</span>",
            imgUrl:"//www.baidu.com/img/flexible/logo/pc/index@2.png",
            isActive:true,
            num: 0,
            arr:['tom','jerry','dog','host'],
            obj:{
                a:'tom',
                b:'jerry',
                c:'dog',
                d:'host',
            },
            
            user:{
                name:'',
            sex:'男',
            wish:[],
            group:'',
            remark:''
            }

        }
    },
    methods:{
        btnAction(){
            console.log("123");
            console.log('this.msg',this.msg);
            this.test()
            isActive:true 
            
        },
        test(){
        console.log("这是一个test方法");
    },
    switchIsAction(){
        this.isActive = !this.isActive
    },
    changeNum(number){
this.num = number
    }
    },
    // 方法
   
}
</script>